<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["commonData"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xDatas: null,
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;

          this.getData(this.allData);
        }
      },
      immediate: true,
    },
  },

  mounted() {
    setTimeout(() => {
      this.initChart();
      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 100);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);

      var option = {
        backgroundColor: "#fff",
        color: ["#FF0000", "#FF0000", "#0F870F", "#0000FF"],

        tooltip: {
          trigger: "axis",
        },
        title: [
          {
            right: "5%",
            bottom: "18%",
            textStyle: {
              color: "#333",
              fontSize: 12,
              fontWeight: 400,
            },
          },
          {
            text: "",
            right: "5%",
            bottom: "14%",
            textStyle: {
              color: "red",
              fontSize: 12,
              fontWeight: 400,
            },
          },
          {
            text: "",
            right: "5%",
            bottom: "26%",
            textStyle: {
              color: "red",
              fontSize: 12,
              fontWeight: 400,
            },
          },
        ],

        legend: {
          data: ["上限", "下限", "中值", "目标", "当前值"],
          textStyle: {
            // color: '33FFFF',
            fontSize: 14,
          },
          itemWidth: 15,
          itemHeight: 15,
          itemGap: 35,
        },
        grid: {
          left: "1%",
          right: "2%",
          top: "16%",
          bottom: "6%",
          containLabel: true,
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#CCCCCC",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#D5D5D5",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#DBDBDB",
              type: "solid",
              width: "0.5",
            },
          },

          data: [
            "0.075",
            "0.15",
            "0.3",
            "0.6",
            "1.18",
            "2.36",
            "4.75",
            "9.5",
            "13.2",
            "16",
            "19",
            "26.5",
            "31.5",
            "37.5",
          ],
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#333",
            },
          },
          name: "通过率",
          min: 0,
          max: 100,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#DBDBDB",
              type: "solid",
              width: "0.5",
            },
          },
          axisTick: {
            show: false,
          },

          axisLabel: {
            fontSize: 8,
            textStyle: {
              color: "#333",
            },
            formatter: "{value}%",
          },
          type: "value",
        },
        series: [
          {
            name: "上限",
            type: "line",
            symbolSize: 6,

            lineStyle: {
              normal: {
                color: "#FF0000",
                width: 0.5,
                type: "dotted",
              },
            },
          },
          {
            name: "下限",

            type: "line",
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: "#FF0000",
                width: 0.5,
                type: "dotted",
              },
            },
          },
          //
          {
            name: "中值",

            type: "line",
            symbolSize: 6,

            lineStyle: {
              normal: {
                color: "#46868E",
                width: 0.5,
                type: "dotted",
              },
            },
          },
          {
            name: "目标",

            type: "line",
            symbolSize: 6,

            lineStyle: {
              normal: {
                color: "#0F870F",
                width: 0.5,
                type: "dotted",
              },
            },
          },
          {
            name: "当前值",
            // smooth: true,
            type: "line",
            symbolSize: 6,
            symbol: "circle",

            itemStyle: {
              normal: {
                color: "#0000FF",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#0000FF",
                  },
                },
              },
            },
            lineStyle: {
              normal: {
                width: 0.8,
              },
            },
          },
          {
            name: "石油比",
            type: "gauge",
            center: ["15%", "33%"],
            splitNumber: 3,
            radius: "60%",
            startAngle: 165,
            endAngle: 15,
            // min: 4.45,
            // max: 7.55,
            pointer: {
              length: "70%",
              width: 3,
              itemStyle: {
                color: "auto",
              },
            },

            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 10,
              },
            },
            axisTick: {
              // 坐标轴小标记
              length: 14, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
              },
            },
            splitLine: {
              // 分隔线
              length: 17, // 属性length控制线长

              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto",
                width: 2,
              },
            },

            detail: {
              formatter: function (value) {
                var num = Math.round(value);
                return "{bule|油石比}{bule|" + num + "}{bule|%}";
              },
              rich: {
                bule: {
                  fontSize: 12,
                  fontFamily: "siyuan",
                  color: "auto",
                  fontWeight: "500",
                },
              },
              offsetCenter: ["0%", "-30%"],
            },

            data: [
              {
                value: 165,
              },
            ],
          },

          {
            name: "温度",
            type: "gauge",
            center: ["15%", "68%"],
            radius: "60%",
            z: 500,
            // min: 100,
            // max: 230,
            startAngle: 165,
            endAngle: 15,

            splitNumber: 5, //刻度数量
            pointer: {
              length: "70%",
              width: 3,
              itemStyle: {
                color: "auto",
              },
            },

            axisTick: {
              // 坐标轴小标记

              length: 14, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
              },
            },
            splitLine: {
              // 分隔线

              length: 17, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto",
                width: 2,
              },
            },
            axisLine: {
              show: true,

              distance: 10,
            }, //仪表盘轴线
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getData() {
      // 级配上限
      if (this.allData.lineList.length > 0) {
        let arr1 = [];
        let num1 = [];
        this.allData.lineList[0].forEach((item1) => arr1.unshift(item1));
        arr1.map((item) => {
          num1.push(item);
        });
        // 级配下限
        let arr2 = [];
        let num2 = [];
        this.allData.lineList[1].forEach((item1) => arr2.unshift(item1));
        arr2.map((item) => {
          num2.push(item);
        });

        // 级配中限
        let arr3 = [];
        let num3 = [];
        this.allData.lineList[2].forEach((item1) => arr3.unshift(item1));
        arr3.map((item) => {
          num3.push(item);
        });
        // 目标级配
        let arr4 = [];
        let num4 = [];
        this.allData.lineList[3].forEach((item1) => arr4.unshift(item1));
        arr4.map((item) => {
          num4.push(item);
        });
        // 实际级配
        let arr5 = [];
        let num5 = [];
        this.allData.lineList[4].forEach((item1) => arr5.unshift(item1));
        arr5.map((item) => {
          num5.push(item);
        });

        var that = this;

        setTimeout(() => {
          that.updateChart(
            num1,
            num2,
            num3,
            num4,
            num5,
            this.allData.asphaltAggregate,
            this.allData.temperature,
            this.allData.fActualasphaltaggregateratio,
            this.allData.fMixtemperature,
            this.allData.formData
          );
          // that.updateChart();
        }, 200);
      } else {
        that.updateChart([], [], [], [], [], {}, {}, 0, 0, {});
      }
    },
    updateChart(
      num1,
      num2,
      num3,
      num4,
      num5,
      asphaltAggregate,
      temperature,
      fActualasphaltaggregateratio,
      fMixtemperature
      // formData
    ) {
      // 油石比 最大值减去最小值
      var youTotal =
        asphaltAggregate.aggregateHigh - asphaltAggregate.aggregateLow; //最大值减去最小值
      // 左侧预警 正常范围最小值减去油石比最低值
      var youLow =
        asphaltAggregate.aggregateLowMid - asphaltAggregate.aggregateLow;
      // 正常范围 油石比正常区间最大值减去油石比正常区间最小值
      var youNormal =
        asphaltAggregate.aggregateHighMid - asphaltAggregate.aggregateLowMid;
      // 右侧预警 油石比最高值减去 油石比正常区间最大值
      var youHigh =
        asphaltAggregate.aggregateHigh - asphaltAggregate.aggregateHighMid;

      // 油石比
      // 温度 最大值减去最小值
      var temTotal = temperature.temHigh - temperature.temLow;
      // 左侧高级预警
      var temLeftHigh = temperature.temLowMid1 - temperature.temLow;
      //   左侧中级预警
      var temLeftMid = temperature.temLowMid2 - temperature.temLowMid1;
      //   左侧初级预警
      var temLeftLow = temperature.temLowMid3 - temperature.temLowMid2;
      // 正常范围
      var temNormal = temperature.temHighMid1 - temperature.temLowMid3;
      // 左侧初级预警
      var temRightHigh = temperature.temHighMid2 - temperature.temHighMid1;
      //   左侧中级预警
      var temRightMid = temperature.temHighMid3 - temperature.temHighMid2;
      //   左侧高级预警
      var temRightLow = temperature.temHigh - temperature.temHighMid3;

      // 温度
      var dataOption = {
        xAxis: {},
        series: [
          {
            data: num1,
          },
          {
            data: num2,
          },

          {
            data: num3,
          },
          {
            data: num4,
          },
          {
            data: num5,
          },
          {
            min: asphaltAggregate.aggregateLow,
            max: asphaltAggregate.aggregateHigh,

            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 10,

                color: [
                  [youLow / youTotal, "#F56C6C"],
                  [(youLow + youNormal) / youTotal, "#67C23A"],
                  [(youLow + youNormal + youHigh) / youTotal, "#F56C6C"],
                ],
              },
            },

            detail: {
              formatter: function (value) {
                return "{bule|油石比}{bule|" + value + "}{bule|%}";
              },
              rich: {
                bule: {
                  fontSize: 12,
                  fontFamily: "siyuan",
                  color: "auto",
                  fontWeight: "500",
                },
              },
              offsetCenter: ["0%", "-30%"],
            },

            data: [
              {
                value: fActualasphaltaggregateratio,
              },
            ],
          },
          {
            min: temperature.temLow,
            max: temperature.temHigh,
            axisLine: {
              show: true,

              distance: 10,
              lineStyle: {
                width: 10,
                color: [
                  [
                    (temLeftHigh + temLeftMid + temLeftLow) / temTotal,
                    "#F56C6C",
                  ],
                  [
                    (temLeftHigh + temLeftMid + temLeftLow + temNormal) /
                      temTotal,
                    "#67C23A",
                  ],
                  [
                    (temLeftHigh +
                      temLeftMid +
                      temLeftLow +
                      temNormal +
                      temRightHigh +
                      temRightMid +
                      temRightLow) /
                      temTotal,
                    "#F56C6C",
                  ],
                ],
              },
            }, //仪表盘轴线
            detail: {
              formatter: function (value) {
                // var num = Math.round(value);
                return "{bule|温度}{bule|" + value + "}{bule|℃}";
              },
              rich: {
                bule: {
                  fontSize: 12,
                  fontFamily: "siyuan",
                  color: "auto",
                  fontWeight: "500",
                },
              },
              offsetCenter: ["0%", "-30%"],
            },

            data: [
              {
                value: fMixtemperature,
              },
            ],
          },
        ],
      };

      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;

      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: [
          {
            bottom: "14%",
            textStyle: {
              color: "#333",
              fontSize: titleFontSize * 1.2,
              fontWeight: 400,
            },
          },
          {
            text: "",
            bottom: "14%",
            textStyle: {
              color: "red",
              fontSize: titleFontSize * 1.2,
            },
          },
        ],

        legend: {
          textStyle: {
            // fontSize: titleFontSize * 1.2,
            fontSize: 14,
          },
          //   itemWidth: titleFontSize * 1.2,
          //   itemHeight: titleFontSize * 1.2,
          itemWidth: 14,
          itemHeight: 14,
          itemGap: titleFontSize * 2,
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                // fontSize: titleFontSize * 1.2,
                fontSize: 12,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                // fontSize: titleFontSize * 1.2,
                fontSize: 12,
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope></style>
